import React, { Component, createContext } from "react";

// createContext用于做跨组件传参，执行以后返回一个context对象
const context = createContext();
// context对象里面又可以解构出两个组件
//      提供者     消费者
const { Provider, Consumer } = context;

const Child2 = () => {
  return (
    // Consumer组件用在接收的地方，
    // 里面可以写一个函数，这个函数可以接收一个value参数(就是Provider的value属性),返回一个jsx
    <div>
      child2组件 - <Consumer>{(value) => <span>{value.num}</span>}</Consumer>
    </div>
  );
};

class Child1 extends Component {
  render() {
    return (
      <>
        <div>child1组件</div>
        <Consumer>{(value) => <div>{value.name}</div>}</Consumer>
        <Child2 />
      </>
    );
  }
}

class App extends Component {
  state = {};
  render() {
    return (
      // Provider要加在父组件的外面，必须要有一个value属性
      // value属性就是我们要传递的值
      <Provider
        value={{
          num: 100,
          name: "zhangsan",
        }}
      >
        <h2>上下文context</h2>
        <Child1 />
      </Provider>
    );
  }
}

export default App;
